<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角属性</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 200px;
            height: 200px;
            margin: 20px;
            /* 圆角属性
                作用：将元素的四个角落设置成圆角，让他的角落变得更加的圆润

                写法：
                1.单例写法：border-top-right-radius: ;
                2.复合写法：border-radius: ;
                    1)一个值：四个角落都设置一个半径为x的圆角
                    2）两个值：border-radius: x/y
                    x表示水平半径
            */ 
            /* border-top-right-radius: 20px; */
            border-radius: 20px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>